<template>
    <div class="main flex-column">
        <div class="top flex-between">
            <div>
                <el-button type="primary">创建</el-button>
                <el-select v-model="value" placeholder="请选择">
                    <el-option
                        v-for="item in options"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                    </el-option>
                </el-select>
                <el-button type="warning">模板设置</el-button>
                <el-button>excel导入</el-button>
                <el-button>导出</el-button>
                <el-button>老系统导入</el-button>
            </div>
            <div class="flex-between">
                <el-input v-model="input" placeholder="请输入原料名或助记码或原料编码查询"></el-input>
                <el-select v-model="value" placeholder="请选择">
                    <el-option
                        v-for="item in options"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                    </el-option>
                </el-select>
                <el-button type="primary">查询</el-button>
                <el-button type="primary">更多查询</el-button>
            </div>
        </div>
        <div class="con flex">
            <div class="left">
                <v-tree></v-tree>
            </div>
            <div class="right">
                <el-table
                    ref="multipleTable"
                    :data="tableData"
                    tooltip-effect="dark"
                    style="width: 100%"
                    @selection-change="handleSelectionChange">
                    <el-table-column
                        type="selection"
                        width="55">
                    </el-table-column>
                    <el-table-column
                        label="商品名称"
                        width="120">
                        <template slot-scope="scope">{{ scope.row.date }}</template>
                    </el-table-column>
                    <el-table-column
                        prop="name"
                        label="商品编码"
                        width="120">
                    </el-table-column>
                    <el-table-column
                        prop="name"
                        label="助记码"
                        width="120">
                    </el-table-column>
                    <el-table-column
                        prop="name"
                        label="售卖单位"
                        width="120">
                    </el-table-column>
                    <el-table-column
                        prop="name"
                        label="盘点方式"
                        width="120">
                    </el-table-column>
                    <el-table-column
                        prop="name"
                        label="记存货"
                        width="120">
                    </el-table-column>
                    <el-table-column
                        prop="name"
                        label="说明"
                        width="120">
                    </el-table-column>
                    <el-table-column
                        prop="name"
                        label="状态"
                        width="120">
                    </el-table-column>
                    <el-table-column
                        prop="address"
                        label="操作"
                        show-overflow-tooltip>
                        <template slot-scope="scope">
                            <el-button type="primary" size="mini">详情</el-button>
                            <el-button type="primary" size="mini">修改</el-button>
                            <el-button type="primary" size="mini">下发</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
        </div>
    </div>
</template>

<script>
    import vTree from './tree'
    export default {
        components:{
            'vTree':vTree,
        },
        data () {
            return{
                input:'',
                options: [{
                    value: '选项1',
                    label: '批量操作'
                }, {
                    value: '选项2',
                    label: '禁用/启用'
                }, {
                    value: '选项3',
                    label: '删除'
                }],
                value: '',
                tableData: [{
                    date: '2016-05-03',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1518 弄'
                }, {
                    date: '2016-05-02',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1518 弄'
                }, {
                    date: '2016-05-04',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1518 弄'
                }, {
                    date: '2016-05-01',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1518 弄'
                }, {
                    date: '2016-05-08',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1518 弄'
                }, {
                    date: '2016-05-06',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1518 弄'
                }, {
                    date: '2016-05-07',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1518 弄'
                }],
                multipleSelection: []
            }
        },
        methods:{
            handleSelectionChange(val) {
                this.multipleSelection = val;
            },
        }
    }
</script>

<style lang="less" scoped>
    .main{
        width: 100%;
        height: 100%;
        .top{
            margin-bottom: 10px;
        }
        .con{
            flex: 1;
            .left{
                background: #fff;
            }
            .right{
                flex: 1;
                background: #fff;
            }
        }
    }


</style>
